<template>
  <div class="boxs" ref="box">
    <div class="intro">
      <p>{{$store.state.articalTitle}}</p>
      <p>发布成功！正在审核中<i>   .........</i></p>
      <button
        @mousedown="btnHandelOne"
        @mouseup="btnHandelTwo"
      >
        确定
      </button>
    </div>
  </div>
</template>

<script>
export default {
  name: 'Artifin',
  data () {
    return {
      list: null
    }
  },
  methods: {
    btnHandelOne () {
      event.target.style.boxShadow = '0 0 0px rgb(255,255,255)'
      event.target.style.boxShadow = '0 0 5px rgb(120,120,120) inset'
    },
    btnHandelTwo () {
      event.target.style.boxShadow = '0 0 2px rgb(150,150,150)'
      this.$router.replace('/home')
    }
  },
  mounted () {
    var dom = document.documentElement.clientHeight
    this.$refs.box.style.top = (dom - 300) / 3 + 'px'
  }
}
</script>

<style lang="stylus" scoped>
  .boxs{
    position: relative
    width: 1200px
    height: 300px
    margin: 0 auto
    box-sizing: border-box
    .intro{
      box-sizing: border-box
      width: 700px
      height: 280px
      margin: 0 auto
      content: " "
      display: table
      clear: both
      background-color: rgb(255,255,255)
      button{
        width: 100px
        height: 50px
        border: none
        cursor: pointer
        margin-top: 50px
        outline: none
        box-shadow: 0 0 4px rgb(150,150,150)
        margin-left: 280px
        background-color: rgb(220,220,220)
        color: rgb(0,0,0)
      }
      p{
        font-size: .6rem
        margin-top: 30px
        color: red
        text-align: center
      }
      p + p{
        color: rgb(0,0,0)
        text-align: center
        font-size: .4rem
        i{
          animation: 1.5s linear infinite loading
          transition: all .5s
        }
        @keyframes loading{
          0%{
            opacity: 1
          }
          25%{
            opacity: .5
          }
          50%{
            opacity: 0
          }
          75%{
            opacity: .5
          }
          100%{
            opacity: 1
          }
        }
      }
    }
  }
</style>
